<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="empty-box flexWarpCenterColumn" v-if="showEmpty">
					<image src="/static/order/emptyBg.png" class="empty-image"></image>
					<view class="empty-tips">暂无订单</view>
					<view class="goOrder-btn" @tap="goIndex()">去开台</view>
				</view>
				<scroll-view class="VerticalMain" lower-threshold="50rpx" @scrolltolower="lower" scroll-y
					scroll-with-animation style="height: calc(100vh);" refresher-enabled="true"
					:refresher-triggered="triggered" refresher-default-style="white" :refresher-threshold="100"
					 refresher-background="#fff" @refresherrefresh="onRefresh" @refresherrestore="onRestore">
					<view class="order-box">
						<view class="order-item" v-for="(item,index) in orderList" :key='index'
							@tap="goOrderDetails(item.id)">
							<view class="item-top flexWrap">
								<view class="order-info flexWarpColumn">
									<view class="order-name">
										<text>{{item.store_equipment_name}}</text>
										<text class="shop-name">{{item.shop_name}}</text>
									</view>
									<view class="order-time">
										<block v-if="item.order_type=='immediately'">立刻开台</block>
										<block v-if="item.order_type=='make_appointment'">预约开台</block>
										<block v-if="item.order_type=='other_packages'">其他套餐</block>
										<block v-if="item.order_type=='about_ball'">同城约球</block>
										{{item.quantity}}小时
									</view>
									<view class="order-date">{{item.service_date}} {{item.start_time}}～<text
											v-if="item.is_ci==1">次日</text> {{item.end_time}}</view>
									<view class="order-btn noStarted" v-if="item.order_status==0"
										@tap.stop="showTips(item,index,0)">开始/开灯</view>
									<view class="flexWrapNo" v-if="item.order_status==10">
										<view class="order-btn">使用中</view>
										<view class="order-btn" style="width: 136upx;margin-left: 10upx;" v-if="item.type==2" @tap.stop="goTable(item)">续费</view>
									</view>
									<view class="order-btn end" v-if="item.order_status==20">已结束</view>
									<view class="order-btn end" v-if="item.order_status==30">已取消</view>
									<view class="order-btn end" v-if="item.order_status==40">已超时</view>
								</view>
								<view class="order-img">
									<image src="/static/order/billiards.png" v-if="item.type==1"></image>
									<image src="/static/order/mj.png" v-else></image>
								</view>
							</view>
							<view class="order-status" v-if="item.order_status==10">使用中</view>
							<view class="open-box flexWrap" v-if="item.type==2&&item.isShow==1">
								<view class="open-btn" @tap.stop="goPage('/pages/home/openDoor')">开门</view>
								<view @tap.stop>
									<button class="open-btn share" open-type="share">分享开门</button>
								</view>
							</view>
							<view class="item-bottom flexWrap">
								<view>下单时间：{{item.createtime}}</view>
								<view>详情 <text class="icon-more"></text> </view>
							</view>
						</view>
						<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
					</view>
				</scroll-view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-name" v-if="showIndex==0">是否确认开灯？</view>
					<view class="tips-name" v-else>未到结束时间，是否继续关灯？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeTips()">取消</view>
						<view class="tips-btn noStarted" @tap="openLamp()" v-if="showIndex==0">确定开灯</view>
						<view class="tips-btn noStarted" @tap="opreaAction()" v-else>确定关灯</view>
					</view>
				</view>
				<view class="mask-box" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				pageOpc: 0,
				currmentIndex: 0,
				//下拉刷新
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
				orderList: [],
				tipsFlage: false,
				showIndex: 0,
				order_id: "",
				orderIndex: "",
				triggered: true,
				freshing:false,
				payment_method:1,
				order_type:"",
				timestamp:""
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onShow() {
			this.freshList();
			this.timestamp = Date.parse(new Date())/1000;
			// this._freshing = false;
			// setTimeout(() => {
			// 	this.triggered = true;
			// }, 1000)
		},
		// 下拉刷新
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onShareAppMessage: function(e) {
			let that=this
			return {
				title:"开门",
				path: `/pages/home/openDoor?store_id=${uni.getStorageSync('store_id')}&token=${uni.getStorageSync('token')}`,
				imageUrl:"",
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		methods: {
			goTable(item){
				uni.navigateTo({
					url:"/pages/home/renew?equipment_id="+item.store_equipment_id+'&renew_order_id='+item.id
				})
			},
			goIndex(){
				uni.switchTab({
					url:'/pages/home/index'
				})
			},
			// 触发
			onRefresh() {
				if (this.freshing) return;
				this.freshing = true;
				setTimeout(() => {
					this.triggered = false;
					this.freshing = false;
					console.log(this.triggered)
					console.log(this.freshing)
				}, 1000)
			},
			// 复位
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
				this.freshList();
			},
			// 触底刷新
			lower() {
				if (this.more) {
					this.getData()
				}
			},
			showTips(order, orderIndex, showIndex) {
				this.tipsFlage = true
				this.order_id = order.id
				this.payment_method=order.payment_method
				this.order_type=order.order_type
				this.orderIndex = orderIndex
				this.showIndex = showIndex
			},
			closeTips() {
				this.tipsFlage = false
			},
			changeNav(index) {
				this.currmentIndex = index
			},
			goOrderDetails(order_id) {
				uni.navigateTo({
					url: "/pages/order/orderDetails?order_id=" + order_id
				})
			},
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.orderList = []
				this.getData();
			},
			// 订单数据
			getData() {
				let self = this
				this.$request.post(this.$api.orderList, {
					page: this.page++,
					num: this.size
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray = data
						for (let i in newArray) {
							if(Math.abs(this.timestamp-newArray[i].service_end_time)>86400){
								newArray[i].isShow=0
							}else{
								newArray[i].isShow=1
							}
							newArray[i].createtime = this.$tools.formatDate(newArray[i].createtime, 1)
							newArray[i].service_start_time = this.$tools.formatDate(newArray[i].service_start_time,
								0)
							newArray[i].service_end_time = this.$tools.formatDate(newArray[i].service_end_time, 0)
							newArray[i].service_date = newArray[i].service_start_time.split(' ')[0]
							newArray[i].start_time = newArray[i].service_start_time.split(' ')[1]
							newArray[i].end_time = newArray[i].service_end_time.split(' ')[1]
						}
						console.log(newArray)
						if (newArray.length == 0 && self.page == 2) {
							self.showEmpty = true
							self.showLoadStatus = false
							self.more = false // 不能再次请求了
							return false;
						} else {
							self.showLoadStatus = true
							self.more = true
							self.showEmpty = false
							self.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							self.status = 'noMore'
							self.more = false
							self.showEmpty = false
						}
						self.orderList = self.orderList.concat(newArray);
					}
				}).finally(() => {
					setTimeout(() => {
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			// 开灯
			openLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.openLamp, {
							order_id: this.order_id
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('开灯成功')
								this.orderList[this.orderIndex].order_status = 10
								this.closeTips();
							}
						})
					}
				})
			},
			opreaAction(){
				if(this.payment_method!=3&&this.order_type!='other_packages'){
					this.cancelOrder();
				}else{
					this.closeLamp();
				}
			},
			// 关灯
			closeLamp() {
				this.$jiuaiDebounce.canDoFunction({
					key: 'closeLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.closeLamp, {
							order_id: this.order_id
						}, {
							token: true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code == 1) {
								this.$tools.showToast('关灯成功')
								this.orderList[this.orderIndex].order_status = 20
								this.closeTips();
							}
						})
					}
				})
			},
			// 取消订单
			cancelOrder(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelOrder, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('关灯成功')
								this.orderList[this.orderIndex].order_status = 20
								this.closeTips();
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 0 20upx;
	}

	.VerticalMain {
		flex: auto;
		padding-top: 10rpx;
	}

	.nav-box {
		justify-content: center;

		.nav-item {
			position: relative;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 44upx;
			color: rgba(255, 255, 255, .5);
			margin-left: 90upx;

			.nav-line {
				width: 94upx;
				height: 4upx;
				display: inline-block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: -15upx;
				margin: auto;
			}
		}

		.active {
			color: #FFFFFF;
			font-weight: bolder;

			.nav-line {
				background: #FFB726;
			}
		}
	}

	.empty-box {
		margin-top: 64upx;

		.empty-image {
			width: 400upx;
			height: 400upx;
		}

		.empty-tips {
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #333;
			margin-top: 22upx;
		}

		.goOrder-btn {
			width: 286upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #FFB726;
			border-radius: 16upx;
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333;
			margin-top: 42upx;
		}
	}

	.order-box {
		margin-top: 34upx;

		.order-item {
			min-height: 364upx;
			background: #FFFFFF;
			border-radius: 16upx;
			padding-top: 36upx;
			margin-bottom: 20upx;
			position: relative;

			.item-top {
				min-height: 304upx;
				align-items: self-start;

				.order-info {
					padding-left: 28upx;
					min-height: 304upx;
					padding-bottom: 10rpx;
					.order-name {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;

						.shop-name {
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 34upx;
							color: #6E6E6E;
							margin-left: 18upx;
						}
					}

					.order-time {
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 44upx;
						color: #E69C2F;
						margin-top: 14upx;
					}

					.order-date {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #6E6E6E;
						margin-top: 10upx;
					}

					.order-btn {
						width: 200upx;
						height: 80upx;
						line-height: 80upx;
						text-align: center;
						border: 2upx solid #50AB6E;
						border-radius: 16upx;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color:#50AB6E;
						margin-top: 26upx;
					}

					.noStarted {
						color: #333;
						background-color: #FFB726;
					}

					.end {
						color: #6E6E6E;
						border: 2upx solid #6E6E6E;
					}
				}

				.order-img {
					width: 304upx;
					height: 304upx;
					flex: none;
				}
			}
			button::after {
				border: none;
			}
			button {
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
				line-height: 1;
				color: #333;
				font-size: 28rpx;
				background: none;
				width: 100%;
				border: none;
			}
			.open-box{
				padding: 30rpx;
				padding-top: 0;
				.open-btn{
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2upx solid #FFB726;
					border-radius: 16upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}
				.share{
					background: #FFB726;
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #FFB726;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333;
					border-radius: 20rpx;
				}
			}
			.item-bottom {
				height: 60upx;
				background: #FFFFFF;
				border-radius: 0px 0px 16upx 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #6E6E6E;
				padding: 0 28upx;

				.icon-more {
					border-color: #6E6E6E;
					width: 12upx;
					height: 13upx;
					margin-left: 10upx;
				}
			}

			.order-status {
				width: 136upx;
				height: 44upx;
				background:#50AB6E;
				border-radius: 0px 16upx 0px 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}

	.mask-box {
		background: rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.tips-box {
		width: 660upx;
		height: 390upx;
		background: #fff;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;

		.tips-name {
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #333;
			margin: 90upx 0;
		}

		.btn-box {
			margin-top: 10upx;

			.tips-btn {
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #FFB726;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}

			.noStarted {
				background-color: #FFB726;
				margin-left: 28upx;
			}
		}
	}
</style>
